import React from 'react';
import { Radio,Select } from 'antd';
import './index.css'
import Item from 'antd/lib/list/Item';
import { connect } from 'react-redux'
import {withRouter } from 'react-router-dom'
import {placeOf,boatSeach} from '../../redux/findaBoat/findaBoat'
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const tonnageList = ['1000','1000-2000','2001-4000','4001-6000','6001-10000','10000']
const speciesList = ["煤炭"]
const deliveryList = ['']
@withRouter
@connect(
    state => state,
    { placeOf,boatSeach }
)
export default class SelectList extends React.Component{
    constructor(){
        super();
        this.state = {
            shipName:'',
            dunWei:'',
            huoZhong:'',
            chuFaDi:"",
            radioIndex:"2",
            isShow:false,
            dunweiState:false,
            chuFaDiStatrL:false,
            isShow1:false
        }
    }
    componentDidMount(){
        this.props.placeOf();
    }
    
    onChange(value){
        console.log(this.props)
        if(value.target.value === '6'){
           this.props.boatSeach(this.state);
        }else if(value.target.value === '1'){
            this.setState({
                isShow1:true,
                isShow:true
            })
        }else if(value.target.value === '5'){
            this.setState({
                isShow:true,
                dunWei:'',
                chuFaDiStatrL:false,
                dunweiState:false,
                chuFaDi:''
            })
        }else{
            this.setState({
                isShow:false,
                isShow1:false
            })
        }
        this.setState({
            radioIndex:value.target.value
        })
    }
    selListBtn(item){
        this.setState({
            chuFaDi:item
        })
    }
    selListBtn1(item){
        this.setState({
            dunWei:item,
            dunweiState:true
        })
    }
    selListBtn2(item){
        this.setState({
            huoZhong:item,
            chuFaDiStatrL:true
        })
    }
    handseach(value){
        this.props.bortValue(value)
    }
    render() {
        const tonnage = (
            <ul>
                {tonnageList.map((item,index) =>
                    
                        item == 1000 ?
                        <li key={index} onClick={this.selListBtn1.bind(this,item)}>{item+"吨以下"}</li>
                        :
                        item == 10000 ? 
                        <li key={index} onClick={this.selListBtn1.bind(this,item)}>{item+"吨以上"}</li>
                        :
                        <li key={index} onClick={this.selListBtn1.bind(this,item)}>{item+"吨"}</li>
                   
                )}
            </ul>
        )
        const species = (
            <ul>
                {speciesList.map((item,index) =>
                    <li key={index} onClick={this.selListBtn2.bind(this,item)}>{item}</li>
                )}
            </ul>
        )
        const delivery = (
            <ul>
                {this.props.findLists.areaList.map((item,index) =>
                    <li key={index} onClick={this.selListBtn.bind(this,item.regionName)}>{item.regionName}</li>
                )}
            </ul>
        );
         let centerList;
         if(this.state.radioIndex === "2"){
            centerList = tonnage;
         }else if(this.state.radioIndex === "3"){
            centerList = species;
         }else{
            centerList = delivery;
         }           
        return (
        <div>
            <div className='selFind'>
                <RadioGroup onChange={this.onChange.bind(this)} style={{width:480}} defaultValue="2">
                    <RadioButton value="1" style={{width:60,textAlign:'center'}}>
                          筛选
                    </RadioButton>
                    <RadioButton value="2" style={{width:200,textAlign:'center'}}>{this.state.dunweiState? this.state.dunWei:'吨位'}</RadioButton>
                    <RadioButton value="4" style={{width:100,textAlign:'center'}}>{this.state.chuFaDiStatrL? this.state.chuFaDi :'发货地'}</RadioButton>
                    <RadioButton value="5" style={{width:60,textAlign:'center'}}>清空</RadioButton>
                    <RadioButton value="6" style={{width:60,textAlign:'center'}}>找船</RadioButton>
                </RadioGroup>
                <div style={{display:this.state.isShow1? 'block':'none'}} className="selList1">
                    <div onClick={this.handseach.bind(this,'1')} style={{height:'40px',lineHeight:'40px',borderBottom:'1px #f0f0f0 solid'}}> 找船 </div>
                    <div onClick={this.handseach.bind(this,'2')} style={{height:'40px',lineHeight:'40px'}}> 筛选 </div>
                </div>
                 <div style={{display:!this.state.isShow ? 'block':'none'}} className='selList'>
                     {
                        centerList
                     }
                </div>
            </div>            
        </div>
    )
    }
}